<template>
  <div class="story-wrap">
		<y-open-app v-if="storyData.kid" :id="storyData.shelveFlag || storyData.delFlag ? '' : storyData.kid" 
		routerAddr="SquareScreen" 
		passprops="targetKid"/>
    <div class="story-info"  v-if="!storyData.delFlag && !storyData.shelveFlag ">
      <div class="user-wrap">
				<img :src="userData.userImg" class="user-img">
				<div class="user-infobox">
					<p class="user-name">{{userData.userNickName}}</p>
					<span class="time"  v-if="storyData.createDate"> {{storyData.createDate | transformTime }}</span>
				</div>
			</div>
			<div class="content-text">{{storyData.content}}</div>
			<!-- 图片 resourceType = 1 -->
			<div class="story-imgWrap" v-if="storyData.resourceType === 1" >
				<img :src="img" class="story-imgs" v-for="(img, index) of imgs" :key="index">
			</div>
			
			<!-- 语音 resourceType = 2 -->
			<div class="story-voiceWrap" v-if="storyData.resourceType === 2">
					<div class="voice-paly" :class="!isPlay ? 'paly' : 'pause'" @click="handleMusic"></div>
					<div class="voice-ing">
						<div class="animation-wrap"  :class="{'animation': isPlay}" ></div>
						<div class="time">{{calcTime}}"</div>
					</div>
					<audio :src="storyData.audioUrl" controls="controls" style="display: none" ref="audio" ></audio>
			</div> 

			<!-- 书籍 resourceType = 3 -->
			<div class="story-bookWrap" v-if="storyData.resourceType === 3">
				<img :src="coverImgUrl" class="bookImg" @error="bookError">
				<div class="book-info">
					<div class="textWrap"><span class="title">书名</span><p class="infotext fontw">{{storyData.title}}</p></div>
					<div class="textWrap"><span class="title">作者</span><p class="infotext" v-if="storyData.authors">{{storyData.authors.join('/')}}</p></div>
					<div class="textWrap"><span class="title">时间</span><p class="infotext">{{storyData.pressDate}}</p></div>
					<div class="fromAddr"><img :src="processChannel(storyData.channel)"/></div>
				</div>
			</div>
			
			<!-- 音乐 resourceType = 4 -->
			<div class="story-musicWrap" v-if="storyData.resourceType === 4">
				<div class="musiCoverImgWrap">
					<img :src="coverImgUrl" class="musiCoverImg" @error="musicError"/>
					<div class="play" :class="!isPlay ? 'paly' : 'pause'" @click="handleMusic"></div>
					<audio :src="storyData.audioUrl" controls="controls" style="display: none" ref="audio" ></audio>
				</div>
				<div class="musicInfoWrap">
					<p class="music-name">{{storyData.title}}</p>
					<p class="music-assistText">歌曲名</p>
					<p class="music-name"  v-if="storyData.authors">{{storyData.authors.join('/')}}</p>
					<p class="music-assistText">演唱者</p>
					<p class="music-name lightColor">{{storyData.album}}</p>
					<p class="music-assistText">专辑名</p>
					<p class="info-bottom">
						<img :src="processChannel(storyData.channel)"  class="music-assistTextx">
					</p>
				</div>
			</div>

			<!-- 电影 resourceType = 5 -->
			<div class="story-filmWrap" v-if="storyData.resourceType === 5">
				<div class="filmCoverWrap"  @click="handleVideo" >
						<img :src="coverImgUrl" class="filmCoverImg" @error="movieError">
						<div class="play"></div>
				</div>
				<div class="filmInfoWrap">
						<div class="textWrap"><span class="title">片名</span><p class="infotext sizel">{{storyData.title}}</p></div>
						<div class="textWrap"><span class="title">导演</span><p class="infotext" v-if="storyData.authors">{{storyData.authors.join('/')}}</p></div>
						<div class="textWrap"><span class="title">演员</span><p class="infotext" v-if="storyData.actors">{{storyData.actors.join('/')}}</p></div>
						<div class="fromText"><img :src="processChannel(storyData.channel)"/></div>
				</div>
			</div>

			<!-- 视频 resourceType = 7   -->
			<y-story-video v-if="storyData.resourceType === 7 " 
			:storyData="storyData" 
			@handlePlay="handleVideo"></y-story-video>
			
			<p class="story-time" v-if="storyData.location">
				<span class="addr"><span class="iconfont icon-position"></span> {{storyData.location}}</span>
			</p>
			<div class="user-habit">
				<p class="likeStatus" @click="openAppSquare">
					<span :class="['iconfont', 'icon-disscuss-new']"></span>
					<span class="lile-text" v-if="storyData.kid">{{storyData.statisticResult.commentCount | reformNum }}</span>
				</p>
				<p class="likeStatus" @click="openAppSquare">
					<span :class="['iconfont', 'icon-like-new']"></span>
					<span class="lile-text" v-if="storyData.kid">{{storyData.statisticResult.likeCount | reformNum }}</span>
				</p>
				<p class="likeStatus" @click="openAppSquare">
					<span :class="['iconfont', 'icon-share-new']"></span>
				</p>
			</div>
		</div>
		<div class="shelve-wrap" v-if="storyData.shelveFlag || storyData.delFlag">
			<img src="./assets/request_delete.png" class="delete-img">
			<p class="shelve-text">该内容已被{{storyData.delFlag ? '删除' : '下架'}}</p>
		</div>
    <y-comment v-if="storyData.kid" :targetKid="$route.params.id"  targetType="story"  />
		<y-viewmore v-if="storyData.kid" :id="storyData.shelveFlag || storyData.delFlag ? '' : storyData.kid" routerAddr="SquareScreen"  passprops="targetKid"/>
		<!-- <y-imagePreview class="imagePreview" :imagesData="imgs" v-if="preview" @handleClosePreview="handleClosePreview" :initialSlide="initialSlide"/> -->
		<y-video class="video" v-if="preview && (storyData.resourceType === 5 || storyData.resourceType === 7) "  :videoUrl="storyData.audioUrl" @handleClosePreview="handleClosePreview" />
  </div>
</template>
<script>
  import YComment from './components/comment'
	import YViewmore from './components/view-more'
	import YImagePreview from './components/imagePreview'
	import YVideo from './components/video'
	import YOpenApp from './components/open-app'
	import YStoryVideo from './components/story-video'
	import { handleOpenApp } from '../../js/open-app'
	let timing = null;
	export default{
		components: {
			YViewmore, YComment, YImagePreview, YVideo, YOpenApp, YStoryVideo
		},
		data() {
			return {
				storyData: {},
				userData: {},
				commentData: [],
				imgs: [],
				isPlay: false,
				coverImgUrl: '',
				preview: false,
				initialSlide: 0,
				calcTime: 0,
			}
		},
		methods: {
			musicError(e, type) {
				this.coverImgUrl = require('./assets/default_music.png')
			},
			movieError(e, type) {
				this.coverImgUrl = require('./assets/default_movie.png')
			},
			bookError(e, type) {
				this.coverImgUrl = require('./assets/default_book.png')
			},
			processChannel(channel) {
				if (channel === 'doubanBook' || channel === 'doubanMovie') {
					return require('./assets/douban.png')
				}
				return require('./assets/qqMusic.png')
			},
			setCoverPlan(type) {
				switch (type) {
					case 'book': {
						return require('./assets/default_book.png');
					}
					case 'movie': {
						return require('./assets/default_movie.png');
					}
					case 'music': {
						return require('./assets/default_music.png');
					}
				}
			},
			// handlePreview(index) {
			// 	this.initialSlide = index;
			// 	this.preview = true;
			// },
			handleClosePreview() {
				this.preview = false;
			},
			handleVideo() {
				this.preview = true;
			},
			handleMusic() {
				let {resourceType, duration} = this.storyData;
				if (!this.isPlay) {
					this.isPlay = !this.isPlay;
					timing = setInterval(() => {
						if (this.calcTime) {
							this.calcTime--;
						} else {
							this.isPlay = !this.isPlay;	
							this.calcTime = duration;
							clearInterval(timing);
						}
					}, 1000)
					return this.$refs.audio.play()
				} else {
					clearInterval(timing);
					this.isPlay = !this.isPlay;	
					return this.$refs.audio.pause()
				}
			},
			openAppSquare() {
				let args = {
					routerAddr: 'SquareScreen',
					props: { targetKid: this.storyData.kid }
				}
				handleOpenApp(args);
			}
		},
		computed: {
			animationStyle() {
				if (this.isPlay) {
					return {
						'animation-duration': `20s`,
						'animation-iteration-count': 'infinite',
					}
				}
			},
		},
		
		async created() {
			let res = await this.$http(`/lovelorn/v1.3/pb/storys/${this.$route.params.id}`);
			let data = res.data.data;
			this.storyData = data || {};
			this.userData = this.storyData.userRelationVO;
			this.commentData = this.storyData.commentList;
			this.imgs = this.storyData.imgUrl.split('@@');
			let {resourceType, content, createDate, title, coverUrl, duration} = this.storyData;
			this.calcTime = duration;
			this.coverImgUrl = `${this.$http.baseUrl}/platform-support/v1/pb/images/action/download?url=${encodeURIComponent(coverUrl)}`;
			let titleText;
			let imgUrl;

			if (resourceType === 0 || resourceType === 1 ) {
				titleText = '拾恋APP-有人给你分享了一个帖子，快来看看吧';
				imgUrl = this.imgs.length > 1 ? this.imgs[0] : '';
			} else if (resourceType === 2) {
				titleText = `分享音频: ${createDate}【音频】`;
				imgUrl = '';
			} else if (resourceType === 3) {
				titleText = `分享书籍: ${title}【书籍】`;
				imgUrl = coverUrl;
			} else if (resourceType === 4) {
				titleText = `分享音乐: ${title}【音乐】`;
				imgUrl = coverUrl;
			} else if (resourceType === 5) {
				titleText = `分享电影: ${title}【电影】`;
				imgUrl = coverUrl;
			} else if (resourceType === 7) {
				titleText = `分享视频: ${title}【视频】`;
				imgUrl = this.storyData.imgUrl;
			}

			if (this.$utils.isWeiXin()) {
				this.$utils.wxShare({
					title: titleText,
					desc: content || '生活的点滴都值得诉说',
					link: `${window.location.origin}/story-share/${this.storyData.kid}`,
					imgUrl: imgUrl || 'https://cdn.yryz.com/lovelorn/image/public/201901/default%403x.png', 
				})
			}
		},
	}
	</script>

<style type="text/css" scoped>
  @import "../../css/var.css";

  .story-wrap {
		position: relative;
		min-height: 100vh;
		& .imagePreview {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			z-index: 99;
		}

		& .video {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			z-index: 99;
		}

    & .story-info {
      background: #fff;
      padding: 0 0 0.3rem;
			& .user-wrap {
				background: #fff;
				display: flex;
				align-items: center;
				padding: 0.3rem;

				& .user-infobox {
					display: flex;
					flex-direction: column;
					& .time {
						font-size: 0.22rem;
						color: #999;
						margin-top: 0.1rem;
					}
				}
			}

			& .user-img {
				width: 0.64rem;
				height: 0.64rem;
				border-radius: 0.32rem;
				background: #eee;
				margin-right: 0.2rem;
			}

			& .user-name {
				font-size: 0.26rem;
				color: #000;
				font-weight: 700;
				line-height: 1;
			}

			& .story-imgWrap {
				position: relative;
				/* display: flex; */
				/* width: 100%; */
				/* overflow: hidden;
				flex-wrap: wrap; */

				& .story-imgs {
					width: 100%;
					height: 100%;
					margin-top: 0.1rem;
					display: block;
				}
			}

			& .story-time {
				margin-top: 0.3rem;
				font-size: 0.24rem;
				padding: 0 0.3rem;
				color: #999;
				line-height: 1;
				display: flex;
				justify-content: space-between;
				& .icon-position{
					font-size: 0.22rem;
					color: #ccc;
				}
				& .addr {
					height: 0.4rem;
					background: #f4f4f4;
					padding: 0 0.2rem;
					border-radius: 0.1rem;
					line-height: 0.4rem;
					color: #333;
				}
			}

			& .content-text {
				padding: 0 0.3rem;
				margin-bottom: 0.2rem;
				font-size: 0.3rem;
				color: #000;
				text-align: justify;
			}

			& .likeStatus {
				padding: 0 0.3rem;
				margin-top: 0.36rem;
				display: flex;
				align-items: center;
				line-height: 0.5rem;
				& .iconfont {
					font-size: 0.5rem;
					color: #000;
				}
				
				& .lile-text {
					font-size: 0.22rem;
					color: #666;
					margin-left: 0.1rem;
					position: relative;
					top: -0.03rem;
				}
			}
		}
		
		& .story-musicWrap {
			margin-top: -0.16rem;
			display: flex;
			background: url('./assets/typecontent-bg.png') no-repeat center;
			background-size: contain;
			height: 3.36rem;
			padding-top: 0.16rem;

			& .musiCoverImgWrap {
				position: relative;
				height: 3rem;
				width: 3rem;
				margin-right: 0.28rem;

				& .play {
					position: absolute;
					width: 0.64rem;
					height: 0.64rem;
					background: url('./assets/play.png') no-repeat center;
					background-size: contain;
					left: 50%;
					top: 50%;
					margin-left: -0.32rem;
					margin-top: -0.32rem;
					&.pause {
						background: url('./assets/pause.png') no-repeat center;
						background-size: contain;
					}
				}
			}

			& .musiCoverImg {
				width: 3rem;
				height: 3rem;
				display: block;
			}

			& .musicInfoWrap {
				flex: 1;
				line-height: 1;
				height: 3rem;
			}

			& .music-name {
				font-size: 0.28rem;
				color: #000;
				line-height: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 1;
				margin-top: 0.2rem;
				font-weight: 700;

				&.lightColor {
					color: #000;
					font-weight: 100;
					font-size: 0.24rem;
					line-height: 1.3;
				}
			}

			& .music-assistText {
				margin-top: 0.1rem;
				font-size: 0.22rem;
				color: #999;
			}

			& .music-assistTextx {
				width: 0.36rem;
				height: 0.36rem;
			}

			& .info-bottom {
				line-height: 1;
				display: flex;
				margin-top: 0.1rem;
				justify-content: flex-end;
				padding-right: 0.3rem;
			}
		}

		& .story-voiceWrap {
			position: relative;
			height: 2.84rem;
			margin: 0.2rem auto 0;
			display: flex;
			align-items: center;
			background: url('./assets/audio-bg.png') no-repeat center;
			background-size: contain;
			& .voice-paly {
					margin-left: 0.6rem;
					width: 0.8rem;
					height: 0.8rem;
					background: url('./assets/play_new.png') no-repeat center;
					background-size: contain;
					&.pause {
						background: url('./assets/pause_new.png') no-repeat center;
						background-size: contain;
					}
				}
			& .voice-ing {
				height: 2.84rem;
				display: flex;
				align-items: center;
				& .time {
					margin-left: 0.2rem;
					font-size: 0.26rem;
					color: #fff;
				}
			}
		}

		& .story-bookWrap {
			margin-top: -0.16rem;
			display: flex;
			background: url('./assets/typecontent-bg.png') no-repeat center;
			background-size: contain;
			height: 3.36rem;
			padding-top: 0.16rem;

			& .bookImg {
				width: 3rem;
				height: 3rem;
				margin-right: 0.3rem;
			}

			& .book-info {
				flex: 1;
				line-height: 1;
				display: flex;
				flex-direction: column;
				margin-top: 0.3rem;

				& .textWrap {
					display: flex;
					align-items: center;
					& + .textWrap {
						margin-top: 0.18rem;
					}
				}	
				& .title {
					font-size: 0.22rem;
					color: #999;
				}

				& .infotext {
					flex: 1;
					margin-left: 0.18rem;
					font-size: 0.24rem;
					color: #000;
					line-height: 1.2;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					&.fontw {
						font-weight: 700;
						font-size: 0.28rem;
					}
				}

				& .fromAddr {
					display: flex;
					justify-content: flex-end;
					margin-right: 0.3rem;
					margin-top: 0.2rem;

					& img {
						width: 0.36rem;
						height: 0.36rem;
					}
				}
			}
		}

		& .story-filmWrap {
			margin-top: -0.16rem;
			display: flex;
			background: url('./assets/typecontent-bg.png') no-repeat center;
			background-size: contain;
			height: 3.36rem;
			padding-top: 0.16rem;

			& .filmCoverWrap {
				width: 3rem;
				height: 3rem;
				position: relative;

				& .filmCoverImg {
					width: 3rem;
					height: 3rem;
					display: block;
				}

				& .play {
					position: absolute;
					width: 0.64rem;
					height: 0.64rem;
					background: url('./assets/play.png') no-repeat center;
					background-size: contain;
					left: 50%;
					top: 50%;
					margin-left: -0.4rem;
					margin-top: -0.4rem;
				}
			}

			& .filmInfoWrap {
				display: flex;
				flex-direction: column;
				padding-left: 0.3rem;
				padding-top: 0.3rem;
				margin-right: 0.3rem;
				flex: 1;
				& .textWrap {
					display: flex;
					align-items: center;
					& + .textWrap {
							margin-top: 0.18rem;
					}
				}	

				& .title {
					font-size: 0.22rem;
					color: #999;
					margin-right: 0.18rem;
				}

				& .infotext {
					flex: 1;
					font-size: 0.24rem;
					color: #000;
					line-height: 1.2;
						display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					-webkit-line-clamp: 1;
					/* overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis; */

					&.sizel {
						font-size: 0.28rem;
						font-weight: 700;
					}
				}
				& .fromText {
					display: flex;
					justify-content: flex-end;
					margin-top: 0.24rem;
					& img {
						width: 0.36rem;
						height: 0.36rem;
					}
				}
			}
		}
		& .shelve-wrap {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 3rem;

			& .shelve-text {
				font-size: 0.3rem;
				margin-top: 0.74rem;
				color: #666;
				text-align: center;
			}
		}

		& .delete-img {
			width: 2.38rem;
			height: 2.82rem;
		}

		& .user-habit {
			display: flex;
		}
	}
	
	.animation-wrap {
		flex: 1;
		margin-right: 0.1rem;
		width: 4.4rem;
		height: 1.62rem;
		background: url('./assets/playing_animate.png') repeat-x;
		background-size: contain; 
		background-position: 0 0; 
		margin-left: 0.45rem;
		&.animation {
			animation: voiceAnimation;
			animation-timing-function: linear;
			animation-duration: 100s
		}
	}

	@keyframes  voiceAnimation {
		0% {
			background-position: 0 0;
		}
		100% {
			background-position: 100rem 0;
		}
	}

</style>
